<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">

<dom-module id="tf-collapsable-pane">
  <template>
    <button
      class="heading"
      on-tap="togglePane"
      open-button$="[[opened]]"
    >
    <span class="name">[[name]]</span>
    <span class="hackpadding"></span>
    <span class="count">
      (<span>[[count]]</span>)
    </span>
  </button>
    <iron-collapse opened="[[opened]]">
      <div class="content">
        <template is="dom-if" if="[[opened]]" restamp="[[restamp]]">
          <content></content>
        </template>
      </div>
    </iron-collapse>
    <style>
      .heading {
        margin-top: 10px;
        padding-left: 15px;
        background-color: #f3f3f3;
        border: 1px solid #dedede;
        border-radius: 5px;
        font-size: 18px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 100%;
        height: 30px;
        box-sizing: border-box;
        font-size: 16px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        line-height: 1;
        padding-top: 2px;
        padding-bottom: 2px;
      }

      .content {
        padding: 15px;
        border: 1px solid #dedede;
        border-top: none;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
      }
      [open-button] {
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
      }
      .name {
        flex-grow: 0;
      }
      .count {
        flex-grow: 0;
        float: right;
        font-size: 12px;
      }
      .hackpadding {
        /* An obnoxious hack, but I can't get justify-content: space-between to work */
        flex-grow: 1;
      }
    </style>
  </template>
  <script>
    Polymer({
      is: "tf-collapsable-pane",
      properties: {
        opened: {type: Boolean, value: false},
        restamp: {type: Boolean, value: true},
        name: {type: String, observer: "hide"},
        count: {type: Number},
      },
      hide: function() {
        this.opened = false;
      },
      togglePane: function() {
        this.opened = !this.opened;
      }
    });
  </script>

</dom-module>
